import ImageBlock from "@/entities/imageBlock/ui/ImageBlock";
import InteractiveModelBlock from "@/entities/interactiveModelBlock/ui/InteractiveModelBlock";
import TestBlock from "@/entities/testBlock/ui/TestBlock";
import { useCheckMenyTests } from "@/features/completeLesson/model/useCheckManyTests";
import CreateTestButton from "@/features/create-test/ui/CreateTestButton";
import CreateImageBlockButton from "@/features/createImageBlock/ui/CreateImageBlockButton";
import CreateInteractiveModelBlockButton from "@/features/createInteractiveModelBlock/ui/CreateInteractiveModelBlock";
import TextEditor from "@/features/textEditor/ui/TextEditor";
import { UiButton } from "@/shared/Uikit";
import { EditorState, RawDraftContentState, convertToRaw } from "draft-js";
import { useEffect, useState } from "react";

export default function TestPage() {
    const [value, setValue] = useState<RawDraftContentState>(convertToRaw(EditorState.createEmpty().getCurrentContent()))
    const { isSuccess, response, handleSubmit } = useCheckMenyTests()
    const testIds: number[] = Object.values(value.entityMap).filter((entity) => {
        return entity.type == 'TestBlock'
    }).map((entity) => {
        return entity.data.id
    })
    return (
        <>
            <TextEditor
                customComponents={[
                    {
                        component: (props: {
                            blockProps: { id: number }
                        }) => {

                            return (
                                <>
                                    <TestBlock
                                        testId={props.blockProps.id}
                                    />
                                </>
                            )
                        },
                        key: 'TestBlock',
                        button: (insert) => {
                            return <CreateTestButton
                                onSuccess={(response) => {
                                    insert({ id: response.id })
                                }}
                            />
                        }
                    },
                    {
                        component: (props: {
                            blockProps: { id: number }
                        }) => {

                            return (
                                <>
                                    <ImageBlock
                                        imageId={props.blockProps.id}
                                    />
                                </>
                            )
                        },
                        key: 'ImageBlock',
                        button: (insert) => {
                            return <CreateImageBlockButton
                                onSuccess={(response) => {
                                    insert({ id: response.id })
                                }}
                            />
                        }
                    },
                    {
                        component: (props: {
                            blockProps: { id: number }
                        }) => {

                            return (
                                <>
                                    <div className='cursor-default'>

                                        <InteractiveModelBlock
                                            modelId={props.blockProps.id}
                                        />
                                    </div>
                                </>
                            )
                        },
                        key: 'InteractiveModelBlock',
                        button: (insert) => {
                            return <CreateInteractiveModelBlockButton
                                onSuccess={(modelId) => {
                                    insert({ id: modelId })
                                }}
                            />
                        }
                    }
                ]}
                setValue={setValue}
                
            />

            <UiButton variant='primary'
                onClick={() => {
                    const tests = testIds.map((testId) => {
                        const answers = localStorage.getItem(`testResults_${testId}`)
                        localStorage.removeItem(`testResults_${testId}`)
                        return {
                            testId,
                            answers: answers ? JSON.parse(answers) : []
                        }
                    })
                    handleSubmit(tests)
                }}
            >
                Завершить
            </UiButton>
            <div>
                {JSON.stringify(response)}
            </div>
        </>
    )
}